Comment construire un meilleur UX avec des données HTML5 * Attributs

Avez-vous déjà voulu ajouter des données personnalisées à un élément HTML particulier pour y accéder plus tard avec JavaScript? Avant l'apparition de HTML5 sur le marché, le stockage de données personnalisées associées au DOM était un vrai problème et les développeurs devaient utiliser toutes sortes de hacks, comme l'introduction d'attributs non standard ou l'utilisation de la méthode obsolète setUserData () pour contourner le problème. .

Heureusement, vous n'avez plus besoin de le faire, car HTML5 a introduit de nouveaux attributs globaux de data-* qui permettent d'intégrer des informations supplémentaires sur les éléments HTML. Les nouveaux attributs data-* rendent le HTML plus extensible, vous permettant ainsi de créer des applications plus complexes et de créer une expérience utilisateur plus sophistiquée sans recourir à des techniques gourmandes en ressources telles que les appels Ajax ou les requêtes de base de données côté serveur.

La prise en charge par le navigateur des nouveaux attributs globaux est relativement bonne, car ils sont pris en charge par tous les navigateurs modernes (IE8-10 les supporte partiellement).

La syntaxe des nouveaux attributs data-* est similaire à celle des attributs aria-prefixed. Vous pouvez insérer n'importe quelle chaîne en minuscule à la place du signe * . Vous devez également attribuer une valeur à chaque attribut sous la forme d'une chaîne.

Supposons que vous souhaitiez créer une page À propos de nous et stocker le nom du département où chaque employé travaille. Vous n'avez rien d'autre à faire que d'ajouter l'attribut personnalisé data-department à l'élément HTML approprié de la façon suivante:

 John Doe
 Jane Doe

Les attributs data-* personnalisés sont globaux, tout comme les attributs class et id, vous pouvez donc les utiliser sur tous les éléments HTML. Vous pouvez également ajouter autant d'attributs data-* à une balise HTML que vous le souhaitez. Dans l'exemple ci-dessus, vous pouvez par exemple introduire un nouvel attribut personnalisé appelé data-user de data-user pour stocker les noms d'utilisateur des employés.

 John Doe
 Jane Doe

En règle générale, si vous souhaitez ajouter votre propre attribut personnalisé à un élément HTML, vous devez toujours le préfixer avec la chaîne de data- . De même, lorsque vous voyez un attribut avec préfixe de données dans le code de quelqu'un d'autre, vous pouvez être certain qu'il s'agit d'un attribut personnalisé introduit par l'auteur.

Quand utiliser et quand ne pas utiliser les attributs personnalisés

Le W3C définit les attributs data-* personnalisés comme suit:

"Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées sur la page ou l'application, pour lesquelles il n'y a plus d'attributs ou d'éléments appropriés."

Cela vaut la peine d'utiliser data-* attributs data-* lorsque vous ne trouvez pas d'autres attributs sémantiques pour les données que vous voulez stocker .

Ce n'est pas la meilleure idée de les utiliser uniquement à des fins de style, comme pour cela, vous pouvez choisir parmi la class et les attributs de style . Si vous souhaitez stocker un type de données pour lequel HTML5 a un attribut sémantique, tel que l'attribut datetime pour le élément, utilisez-le à la place de l'attribut data-prefixed.

Il est important de noter que data-* attributs data-* contiennent des données privées à la page ou à l'application, ce qui signifie qu'elles seront ignorées par les agents utilisateurs, tels que les robots des moteurs de recherche et les applications externes. Les attributs avec préfixes de données sont uniquement accessibles par le code qui s'exécute sur le site qui héberge le code HTML.

Les attributs data-* personnalisés sont largement utilisés par les frameworks frontend, tels que Bootstrap et Zurb Foundation. La bonne nouvelle est que vous n'avez pas nécessairement besoin de savoir comment écrire du code JavaScript si vous voulez utiliser des attributs préfixés par les données dans le cadre d'un framework, car il vous suffit de les ajouter au code HTML pour déclencher une fonctionnalité d'un plugin JavaScript pré-écrit.

L'extrait de code ci-dessous ajoute une info-bulle sur la gauche d'un bouton dans Bootstrap en utilisant les attributs personnalisés de data-placement, et en leur affectant des valeurs appropriées.

 Info-bulle à gauche 

Cible data-* Attributs avec CSS

Bien qu'il ne soit pas recommandé d'utiliser data-* attributs data-* uniquement à des fins de style, vous pouvez sélectionner les éléments HTML auxquels ils appartiennent à l'aide de sélecteurs d'attribut généraux. Si vous voulez sélectionner chaque élément qui a un certain attribut préfixé par les données, utilisez cette syntaxe dans votre CSS:

 li [utilisateur de données] {couleur: bleu; } 

Notez que ce ne sont pas les noms d'utilisateurs qui seront affichés en bleu dans l'extrait de code ci-dessus - après toutes les données stockées dans les attributs personnalisés ne sont pas visibles - mais les noms des employés contenus dans le

éléments (dans l'exemple "John Doe" et "Jane Doe").

Si vous voulez uniquement sélectionner des éléments dans lesquels un attribut avec préfixe de données prend une certaine valeur, voici la syntaxe à utiliser:

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

Vous pouvez utiliser tous les sélecteurs d'attributs CSS plus compliqués, tels que le sélecteur de combinateur général ( [data-value~="foo"] ) ou le sélecteur générique ( [data-value*="foo"] ), avec des attributs préfixés ainsi.

Accéder aux data-* Attributs avec JavaScript

Vous pouvez accéder aux données stockées dans les attributs data-* personnalisés avec JavaScript en utilisant soit la propriété dataset, soit la méthode data() de jQuery.

Vanilla JavaScript

La propriété dataset est la propriété de l'interface HTMLElement, ce qui signifie que vous pouvez l'utiliser sur n'importe quelle balise HTML. La propriété dataset donne accès à tous les attributs data-* personnalisés de l'élément HTML donné. Les attributs sont renvoyés en tant qu'objet DOMStringMap contenant une entrée pour chaque attribut data-* .

Dans notre exemple de page À propos de nous, vous pouvez facilement vérifier les attributs personnalisés que "Jane Doe" a en utilisant la propriété dataset de la façon suivante:

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

Vous pouvez voir que dans l'objet DOMStringMap renvoyé, les préfixes de data- sont supprimés des noms des attributs ( user au lieu de user de data-user, et department au lieu du department de data-department ). Vous devez utiliser les attributs dans le même format si vous souhaitez uniquement accéder à la valeur d'un certain attribut préfixé par les données (au lieu de la liste de tous les attributs personnalisés, comme dans l'extrait de code ci-dessus).

Vous pouvez récupérer la valeur d'un attribut data-* spécifique en tant que propriété de la propriété dataset . Comme je l'ai mentionné précédemment, vous devez omettre le préfixe de data- du nom de la propriété, donc si vous voulez accéder à la valeur de l'attribut data-user de Jane, vous pouvez le faire de la façon suivante:

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

La méthode data() de jQuery

La méthode data() jQuery permet d'obtenir la valeur d'un attribut préfixé par les données. Ici, vous devez également omettre le préfixe de data- du nom de l'attribut pour y accéder correctement. Dans notre exemple, vous pouvez afficher un message d'alerte avec le nom du département où "Jane" fonctionne avec le code suivant:

 $ ("# jane"). hover (fonction () {var département = $ ("# jane"). data ("département"); alert (département);}); 

La méthode data() doit être utilisée avec précaution, car elle sert non seulement à obtenir la valeur d'un attribut préfixé par les données, mais aussi à attacher des données à un élément DOM de la manière suivante:

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

Les données supplémentaires que vous attachez avec la méthode dataQ de jQuery n'apparaîtront évidemment pas dans le code HTML comme un nouvel attribut data-*, donc si les deux techniques sont utilisées en même temps, l'élément HTML donné stockera deux ensembles de données, une avec HTML et l'autre avec jQuery.

Dans notre exemple, "Jane" a obtenu une nouvelle donnée personnalisée ( "town" ) avec jQuery, mais cette nouvelle paire clé-valeur n'apparaîtra pas en HTML comme un nouvel attribut data-town . Stocker des données de deux manières différentes n'est pas la meilleure pratique, c'est pourquoi il ne faut utiliser qu'une des deux méthodes à la fois .

Accessibilité et data-* Attributs

Comme les données contenues dans les attributs personnalisés data-* sont privées, les technologies d'assistance peuvent ne pas être en mesure d'y accéder. Si vous souhaitez que votre contenu reste accessible aux utilisateurs désactivés, il est déconseillé de stocker du contenu qui peut être important pour les utilisateurs de cette manière.

Comment gérer et utiliser des extraits de code dans WordPress

Dans les articles précédents, nous avons vécu une certaine personnalisation de WordPress qui implique l'ajout de code dans functions.php . Ces ajouts améliorent la fonctionnalité de notre thème.Prenez notre tutoriel WordPress Login Page par exemple, nous sommes en mesure de rediriger les utilisateurs de la page de connexion WordPress par défaut, wp-login.php, à

(Conseils techniques et de conception)

Visualisation des données: plus de 20 outils et ressources utiles

Il existe de nombreuses technologies disponibles pour collecter et examiner les données. Les applications Web et de bureau ont fourni de très bonnes interfaces pour tomber sous le charme de l'exploration de données, et avec l'augmentation de la popularité, nous avons remarqué un nombre croissant d'infographies créées au cours des dernières années.Aujourd&

(Conseils techniques et de conception)