es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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).

Sintaxis de los data-* Atributos

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

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.

  

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.

    Nuevos recursos para desarrolladores web - enero de 2017

    Nuevos recursos para desarrolladores web - enero de 2017

    Esta serie ha recorrido un largo camino a través del cual hemos sido testigos de cómo las herramientas de desarrollo web van y vienen ; una vez que brillan, unos meses más tarde quedan obsoletos con otras herramientas más recientes. No obstante, tenemos algunas herramientas nuevas en la lista para que nuestros desarrolladores exploren este mes, que incluyen bibliotecas de JavaScript, un complemento de Sketch para el diseño de IU receptivo y un par de marcos de CSS.Haga

    (Consejos de tecnología y diseño)

    Diseñadores: ¿En qué parte del mundo debería estar trabajando?

    Diseñadores: ¿En qué parte del mundo debería estar trabajando?

    Hay una mitología romántica alrededor de ciertas ciudades . De hecho, todo lo que tienes que hacer es mencionarlos, y miles de imágenes son conjuradas en tu cerebro, producto de décadas de historia y referencias de cultura popular. París. Milán. Londres. Rio de Janeiro. Nueva York . No importa dónde viva, es probable que haya oído hablar de estos lugares y sepa exactamente por qué son famosos .Pero, ¿q

    (Consejos de tecnología y diseño)