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 losdata-*
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
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.
Christmas Icons - 25 Freebies para arreglar tu diseño
Está cerca de Navidad y el comienzo de un nuevo año. Naturalmente, es posible que esté pensando en mejorar el diseño del sitio para dar la bienvenida a este alegre festival. Nos gustaría ayudarte con eso. Para dar la bienvenida a Navidad y Año Nuevo, hemos compilado recursos para diseñadores web en forma de conjuntos de iconos que se pueden utilizar de forma gratuita.Puede
Hiperrealismo o hiperrealismo es un tipo de pintura artística que lleva el arte técnico a un nivel muy alto. Lo que parece ser una fotografía de alta resolución tomada por el artista es en realidad una pintura dibujada a mano. Tomemos, por ejemplo, esta cesta de fruta. Probablemente no te impresionará esta imagen si se tratara de una fotografía, pero al darte cuenta de que es una pintura minuciosamente dibujada a mano, en lugar de eso, te dejará boquiabierto.¿Puede