Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Créer un site web avec Dreamweaver CC

Ajouter des métadonnées

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Placer des métadonnées au sein des contenus est indispensable. Il existe trois sortes de métadonnée comme les informations de zone, les états et les propriétés, et la description des contenus. Apprenez ici à les exploiter.
08:58

Transcription

Tôt ou tard il faut penser à truffer le document du moins la structure du document de méta-données. Alors il est préférable de le faire tôt c'est-à-dire en même temps que l'on met en place le contenu. Mais il est vrai que jusqu'à présent on n'a pas trop eu l'occupation de ce genre de particularité parce que les étapes etaient assez complètes et assez longues donc maintenant on va prendre ce temps et de regarder comment on va pouvoir donner un certain nombre d'informations sur les méta-données. Jusqu'à présent, on avait juste travaillé au moment du header dès le départ, avec la sensibilisation au niveau de l'implémentation de rôle de landmark, donc ARIA au sein de ce document. Ça on va pouvoir continuer c'est-à-dire qu'ici si je regarde la partie aside tous les navigateurs contemporains comprennent que c'est de l'information complémentaire. Alors que pour ARIA, on va pouvoir venir définir « role=complementary ». Et donc ici, on va choisir la partie complementary pour associer cette balise et bien expliquer que là il s'agit d'un complément d'information. Alors il est vrai que tous les lecteurs d'écran aujourd'hui savent que aside c'est complémentaire, donc cette information-là peut être redondante pour des personnes qui auraient un lecteur d'écran qui ne comprend pas HTML5. Ici pour le « main » par exemple, pareil on va pouvoir faire un rôle « main » et à ce sujet il y a un article excellent qui dit qu'on peut définir peu importe la nature de cette balise-là, on va comprendre que c'est une balise qui va contenir le contenu, parce qu'en analysant la présentation de la page, on va vite comprendre où se situe le coeur de l'information. Donc si vous voulez accélérer ce processus, utiliser un attribut rôle « main » pour ARIA, puis balisez-là avec la balise main html5, ça fera le job à plein pot. Pour le footer, ici, sur la partie footer, on pourrait rajouter également qu'il s'agit d'un « contentinfo » parce que généralement, c'est dans cette partie-là où toutes les informations d'adresse, de navigation, etcetera vont pouvoir se situer. Voilà, donc je vous invite à vous rapprocher de ARIA Landmarks pour regarder tous les balisages que vous pourrez faire si vous avez un formulaire de recherche etcetera, des barres de menu, si vous voulez informer l'intégralité de la navigation les menus « item », vraiment penser à truffer l'intégralité de votre document de méta-données de type ARIA. Il existe un second aperçu de la balise ARIA qui va être le state and property qui va être la définition des états, et des propriétés qui vont être donnés. Donc ici par exemple, on a un formulaire il est vrai qu'on aurait pu placer directement un rôle « form » ici aucun intérêt parce que la balise « form » le dit d'elle même, mais on pourrait venir définir ici, par exemple, le formulaire. Le formulaire, par qui va-t-il être décrit ? Et là dessus c'est lui qui va décrire le formulaire et si vous avez besoin de donner en gros quelque part la possibilité de dire ce formulaire est décrit ou est défini par, vous pouvez utiliser le « aria » vous cherchez le « labelled by » et vous allez définir qui le définit. Alors ici, on va prendre le « aria-labelledby » et il va falloir placer un identifiant et l'identifiant on va le placer ici dans la légende en disant id="descriptionform" par exemple, et ici « descriptionform ». Ici, on va pouvoir venir le donner à ce niveau-là. Tous les champs « input » n'utilisent pas d'information ni de label. Une personne qui a un lecteur d'écran ne va pas pouvoir lire ne comprendra pas qu'il faut qu'il tape son login son mot de passe et son email. Et donc là-dessus, ce qui peut être interressant de faire, c'est de créer soit un « span », soit une balise « div » peu importe ce que vous souhaitez et à l'intérieur vous allez placer autant de descriptions pour chacun des éléments. Donc, ici votre login, vous allez pouvoir taper ici, mais vous allez indiquer votre login. Et comme ça, on va pouvoir couper toute cette rubrique-là, en disant votre mot de passe, et votre email et votre email de façon à pouvoir indiquer qui va donner cette information. Et là, à ce niveau-là, vous allez pouvoir placer un identifiant devant chaque « id= » et bien entendu chacun va avoir un id différent. Donc ici, ce sera le « formlogin » puis « formpwrd » et « formmail ». Et bien entendu, il va falloir ajouter les « labelled » ou les « described by » de façon à re-pointer vers cet id. Dernière chose à faire, c'est de récupérer tout cet élément-là de placer un « div » avec par exemple une classe class="masquezone" masquezone par exemple ici, donc vous avez un « div masquezone » qui va être là, on va récupérer cette classe et on va faire un Ctrl+S et on va pouvoir venir directement dans la partie metadata placer une classe masquezone ajouter un « display:none » de façon à ne pas le voir visuellement, mais l'avoir structurellement. Dernière petite chose qu'on pourrait rajouter ici, c'est parce que, il est vrai que le formulaire pour une personne voyante, va comprendre qu'il faut filler son nom, son mail et son login, pour pouvoir accéder à l'envoi de ce formulaire, mais ici il est important de pouvoir dire que pour un lecteur d'écran, voilà attention, ces trois champs sont obligatoires. On va pouvoir le donner en information, une chose qui n'était pas dite du point de vue informatique mais qui pourrait être dite d'un point de vue accessibilité directement. Dernière nature d'information, alors là on n'a pas cette information donnée par Dreamweaver qui ne nous aide pas là-dessus, il va falloir pouvoir taper directement toutes les informations, et dire que par exemple, ici il s'agit d'un « vocab ». Ce « vocab » va être schema.org on va aller pouvoir récupérer les informations sur un vocabulaire propre à schema.org, et ça va concerner donc tout cet article-là du début à la fin. On va dire que l'on utilise un « typeof », alors ça c'est du RDFa Lite. Le « typeof » va être « MusicGroup » et donc on est en train de dire qu'on travaille dans un vocabulaire de groupe musical donc ici toutes les propriétés permettant de décrire un groupe sont utilisables, alors faites bien attention. On n'utilise pas du Microdata avec un itemscope, itemprop, itemtype, mais du RDFa qui utilise un vocabulaire propre à Microdata, donc à schema.org. Et donc, ici on va faire très succint, on va dire que pour l'image on aurait pu avoir une property qui serait égale à images et le nom du groupe, c'est Franck Holbes ici, et donc on pourrait dire que le property="name" cette fois-ci voilà et donc on pourrait venir donner plein d'informations comme l'URL ici, etcetera propre à ce MusicGroup. Ça, ça va nous demander de venir intégrer les méta-données à l'intérieur de la structure HTML. On aurait très bien pu avoir l'équivalent ici, sous forme de script, par exemple puisqu'ici on décrit à cette page « Les tracteurs rouillés ». On va pouvoir venir ici dans la partie haute, alors je vais le mettre juste au-dessus des liens de feuilles de style CSS. On aurait pu placer un script qui dit, attention, ça c'est pas du javascript, c'est une application ld+json, et là, le contexte, c'est schema.org le type c'est « Event », la location c'est « Jouques, FR », la startDate c'est le « 5 octobre 2016 », ici ce sont les images et le name « Les tracteurs rouillés » pour ce festival. Il suffit d'enregistrer cette page, et puis de lancer un aperçu dans Chromium par exemple ici. Et là, Chromium, on a un petit outil qui permet de renifler les méta-données et donc si je regarde cette page, il ne se passe rien, mais si on recharge la page directement depuis un serveur, cette fois-ci l'extension s'active, et on s'aperçoit qu'on a un JSON-LD qui nous dit que c'est un Event à Jouques, et toutes les informations sont collectées, et pareil pour le RDFa Lite ici qui va collecter le MusicGroup avec l'image, le nom du groupe, etcetera. Donc on n'a pas encore vu comment caler le serveur, c'est ce qu'on verra dans une étape prochaine, mais sachez que ces genres de reniflage se font depuis un serveur, et non pas depuis une simple consultation dans un navigateur. Donc, voilà, il est important de penser à venir donner tout un certain nombre de méta-données au sein de son document pour pouvoir le rendre, d'une part accessible, optimiser son référencement, et surtout lui permettre de dialoguer avec d'autres applications qui vont pouvoir venir collecter ce genre d'informations.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !